<template>
  <div>
    <el-row v-if='Visitdate.length'>
      <el-col
        style="border-bottom: 3px solid #f4f5f7"
        v-for="(item, index) in Visitdate"
        :key="item + index"
        :ref="item"
      >
        <el-row class="date_category">
          <el-col :span="12">
            <div class="updateInfo">
              {{ item.v_time }}
              <el-button
                round
                type="primary"
                style="padding: 7px 40px"
                @click="modifyInfo(index)"
                >更改
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="float: right">
              <el-button size="mini" round @click.stop="createWord(item)" type="primary"
                >导出
              </el-button>
              <el-button
                @click.stop="DeleteBtn(item)"
                slot="reference"
                type="danger"
                round
                size="mini"
                >删除</el-button
              >
            </div>
          </el-col>
        </el-row>
        <el-row class="form_vt">
          <el-col class="form_top">
            <el-row>
              <el-col class="f_t_box">
                <el-form v-if="item" ref="form" :model="item" label-width="120px">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="走访人员">
                        <el-input disabled v-model="item.work_name"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item class="Visitdate" label="走访时间">
                        <el-col>
                          <el-date-picker
                            :disabled="true"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder=""
                            v-model="item.v_time"
                            style="width: 100%"
                          >
                          </el-date-picker>
                        </el-col>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="走访照片">
                    <el-upload
                      :on-preview="handlePictureCardPreview"
                      v-if="Array.isArray(item.images)"
                      action="#"
                      ref="upload1"
                      list-type="picture-card"
                      :file-list="item.images"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                        <img
                          style="position: absolute"
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="d_img" :modal='false'>
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </el-form-item>
                  <el-form-item label="知识产权画像">
                    <el-input
                      :disabled="true"
                      :autosize="{ minRows: 3, maxRows: 10 }"
                      type="textarea"
                      v-model="item.des"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row v-else>
      <el-empty description="暂无走访记录"></el-empty>
    </el-row>

    <el-dialog :modal='false' title="是否删除此条记录" :visible.sync="dialogVisible" width="20%" center>
      <span class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Delete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { companyVisit,visitDel } from "@/api/configApi";
import { VUE_APP_BASE_API } from "@/config";

export default {
  data() {
    return {
      Visitdate: [],
      dialogImageUrl: "",
      d_img: false,
      deleteId: "",
      dialogVisible: false,
    };
  },
  watch: {
    company_id: {
      handler(newV, oldV) {
        console.log(newV, oldV, "newV, oldV");
        this.companyVisit();
      },
      deep: true,
    },
  },
  props: {
    company_id: {
      type: Number,
      default: () => 0,
    },
  },
  components: {},
  mounted() {
    this.companyVisit();
  },
  methods: {
    cancel() {
      this.deleteId = "";
      this.dialogVisible = false;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    createWord(data) {
      window.open(`${VUE_APP_BASE_API}/v1/create/word?visit_id=${data.id}`);
    },
    DeleteBtn(row) {
      this.deleteId = row.id;
      this.dialogVisible = true;
    },
    Delete() {
      visitDel({ id: this.deleteId }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.companyVisit();
        this.dialogVisible = false;
      });
    },
    modifyInfo(index) {
        this.$router.push({
          path: "/workVisit",
          query: {
            id: this.Visitdate[index].id,
          },
        });
        //刷新页面
        // location.reload()
    },
    companyVisit() {
      companyVisit({
        limit: 99,
        company_id: this.company_id,
      }).then((res) => {
        console.log(res, "res");
        this.Visitdate = res.list;
        this.Visitdate.map((item) => {
          if(!item.images) return

          let arr = [];
          item.images = item.images.split(",");
          item.images.map((item_) => {
            let obj = {};
            obj.url = item_;
            arr.push(obj);
          });
          item.images = arr;
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .card_v .el-card__body {
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 0 !important;
  }
}
.date_category {
  font-size: 14px;
  color: #387dff;
  margin: 15px 0;
}

.date_category .updateInfo::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 30px;
  background-color: #387dff;
  display: inline-block;
  margin: 2px 5px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .el-form-item__content .upload-demo {
  .el-upload {
    display: none;
  }
}
::v-deep .el-upload {
  display: none;
}
@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
